<template>
  <SysDialog
    draggable
    :showFooter="dialog.showFooter"
    :title="dialog.title"
    :visible="dialog.visible"
    :width="dialog.width"
    :height="dialog.height"
    :marginTop="dialog.marginTop"
    @onClose="onClose"
    @on-confirm="onConfirm"
  >
    <template v-slot:content>
      <!-- 内容组件 -->
      <el-form
        :model="dialogModel"
        ref="experienceDetailForm"
        label-width="120px"
        size="default"
      >
        <el-form-item prop="experienceName" label="经验名">
          <div class="auditStatustStatus">
            {{ experienDetail.experienceName }}
          </div>
        </el-form-item>
        <el-form-item prop="auditStatus" label="审核状态">
          <div class="auditStatustStatus">
            {{
              experienDetail.auditStatus === "0"
                ? "待审核"
                : experienDetail.auditStatus === "1"
                ? "审核成功"
                : "审核驳回"
            }}
          </div>
        </el-form-item>
        <el-form-item prop="createTime" label="创建时间">
          <div class="auditStatustStatus">{{ experienDetail.createTime }}</div>
        </el-form-item>
        <el-form-item prop="createId" label="创建人">
          <div class="auditStatustStatus">{{ experienDetail.createId }}</div>
        </el-form-item>
        <el-form-item prop="description" label="描述">
          <div v-html="experienDetail.newSt"></div>
        </el-form-item>
        <el-form-item
          prop="examineExper"
          label="审核"
          v-if="experienDetail.auditStatus === '0'"
        >
          <el-radio-group v-model="examineStatus" class="ml-4">
            <el-radio label="1" size="large">通过</el-radio>
            <el-radio label="2" size="large">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="fileName" label="导出附件">
          <div
            v-for="item in experienDetail.files"
            :key="item"
            class="fileNameList"
          >
            <div>
              <span style="color: #00ffd2">{{
                item.fileName + "." + item.type
              }}</span>
              <!-- <a
                ref="downloadLink"
                :href="dialogModel.downloadUrl"
                download="document.pdf"
                
                >Download</a
              > -->
              <el-button
                size="small"
                style="margin-left: 20px"
                @click="expoetPdfFile(item.id, item.fileName, item.type)"
                >导出</el-button
              >
            </div>
          </div>
        </el-form-item>
      </el-form>
    </template>
  </SysDialog>
</template>
  
  <script setup lang='ts'>
import { ref, onMounted } from "vue";
import { ElForm } from "element-plus";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import useInstance from "@/hooks/useInstance";
import { EditType, Title } from "@/type/BaseEnum";
import { DetailModel } from "@/api/01work/01type";
import DetailTs from "@/view/05ExperienceBase/01ExperienceBaseList/tsModel/Detail";
import {
  ExperienceGetFileApi,
  ExperienceUpdateApi,
} from "@/api/Experience/ExperienceList";
const emit = defineEmits(["examineStatus"]);
const experienceDetailForm = ref<InstanceType<typeof ElForm>>();
const { dialogModel } = DetailTs();
const examineStatus = ref("");
// 使用
const { dialog, onClose, onShow } = useDialog();
const { global, proxy } = useInstance();
// 父级数据
const props = defineProps({
  experienDetail: {
    type: Object,
    default: () => {},
  },
});
const onConfirm = async () => {
  if (examineStatus.value === "1") {
    const formData = new FormData();
    formData.append("auditStatus", "1");
    formData.append("id", props.experienDetail.id);
    const res = await ExperienceUpdateApi(formData);
    if (res.code === 200) {
      global.$message({ message: "审核成功", type: "success" });
      // getExperiencePage();
      emit('examineStatus')
      examineStatus.value = ''
      dialog.visible = false
    }
  } else {
    const formData = new FormData();
    formData.append("auditStatus", "2");
    formData.append("id", props.experienDetail.id);
    const res = await ExperienceUpdateApi(formData);
    if (res.code === 200) {
      emit('examineStatus')
      global.$message({ message: "审核驳回", type: "success" });
      examineStatus.value = ''
      dialog.visible = false
      // getExperiencePage();
    }
  }
};
// 保存
const show = (type: string, row?: any) => {
  examineStatus.value = ''
  //设置弹框的宽度
  dialog.width = 950;
  dialog.height = 700;
  dialog.marginTop='5vh'
  if (row.auditStatus === "0") {
    console.log(row.auditStatus, "===");
    dialog.showFooter = true;
  } else {
    dialog.showFooter = false;
    console.log(row.auditStatus, "++++");
  }
  //设置弹框的标题
  type == EditType.View
    ? (dialog.title = Title.View)
    : (dialog.title = Title.View);
  // dialog.title = '新增阶段名称'
  //显示
  onShow();
  // 清空表单
  global.$resetForm(experienceDetailForm.value, dialogModel);
};

const expoetPdfFile = async (id, filename, type) => {
  console.log(type);

  if (type === "pdf") {
    const res: any = await ExperienceGetFileApi({ fileId: id });
    console.log(res);
    const blob = new Blob([res], { type: "application/pdf" });
    const url = URL.createObjectURL(blob);
    let a = document.createElement("a"); //创建一个a标签元素
    a.style.display = "none"; //设置元素不可见
    a.href = url; //设置下载地址
    a.setAttribute("download", filename);
    document.body.appendChild(a); //加入
    a.click(); //触发点击,下载
    // document.body.removeChild(a); //释放

    // dialogModel.downloadUrl = url;
    // console.log(url);
    // window.URL.revokeObjectURL(url);
  } else if (type === "docx") {
    const res: any = await ExperienceGetFileApi({ fileId: id });
    console.log(res);
    const blob = new Blob([res], {
      type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    });
    const url = URL.createObjectURL(blob);
    let a = document.createElement("a"); //创建一个a标签元素
    a.style.display = "none"; //设置元素不可见
    a.href = url; //设置下载地址
    a.setAttribute("download", filename);
    document.body.appendChild(a); //加入
    a.click();
  } else if (type === "xlsx") {
    const res: any = await ExperienceGetFileApi({ fileId: id });
    console.log(res);
    const blob = new Blob([res], { type: "application/vnd.ms-excel" });
    const url = URL.createObjectURL(blob);
    let a = document.createElement("a"); //创建一个a标签元素
    a.style.display = "none"; //设置元素不可见
    a.href = url; //设置下载地址
    a.setAttribute("download", filename);
    document.body.appendChild(a); //加入
    a.click();
  }
};
defineExpose({
  show,examineStatus
});
</script>
  <style scoped lang='scss'>
.input {
  border: 1px solid #dcdfe6;
  padding-left: 10px;
  border-radius: 5px;
  width: 100%;
}
.el-form-item .auditStatustStatus {
  border: 1px solid #dcdfe6;
  padding-left: 10px;
  color: #fff;
  border-radius: 4px;
  width: 100%;
}
.fileNameList {
  width: 100%;
  display: flex;
  align-items: center;
  // flex-wrap: wrap;
}
</style>